<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>connection</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<input type="hidden" name="user_id" value="{{user_id}}">

<div class="clearfix row-main">
    <div class="col-md-2">
        <div class="leftmenu affix hiddden-xs hidden-sm">
            <div class='col-md-2'>
                <div class="leftmenu affix hiddden-xs hidden-sm">
                    <ul class='nav-left nav nav-primary nav-stacked'>
                        <li class='' id="commodity"><a href='/admin/commodity/list'>聊天列表<i class="icon-chevron-right"></i></a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="panel">
            <div class="panel-heading clearfix">
                <strong class="center-content"><i class="icon-list-ul"></i > 消息列表</strong>

            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="center-content">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="user_nick">昵称 :</label>
                                <input type="text" class="form-control" name="user_nick" id="user_nick"
                                       value="{{user_nick}}" readonly="readonly">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="show showActive" id="showActive">
                    </div>
                </div>
                <div class="row">
                    <form class="">
                    <div class="col-md-5">
                            <textarea class="" rows="2" name="message" id="message"></textarea>
                    </div>
                    <div class="col-md-1">
                         <input type="button" class="btn btn-primary" name="send" id="send"  value="发送">
                    </div>
                   </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<style type="text/css">
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body{
       background-color: #F5EDED;
    }
    .panel-body {
        background: url("http://w.qq.com/img/bg/1.jpg") no-repeat;
    }
    .show {
        overflow-x: scroll;
        height: 500px;
        padding-bottom: 25px;
        margin : 40px;
        margin-top: 10px;
        margin-bottom : 5px;
        border-style: groove   ;
        border-color: #252020;
        border-top-width: 30px;
        border-bottom-width: 20px;
    }
    .center-content {
        padding: 0px;
        display: block;
        margin-left: 350px;;
        margin-right: auto;
    }
    #message {
        margin-right:20px ;
        margin-left: 150px;
        width: 500px;
    }
    #send {
        margin-top:5px ;
        margin-left: 270px;
    }
    .self_send {
        display: block;
        float: right;
    }
    .message_row {
        display: block;
        clear: both;
        margin-left: 15px;
        margin-right: 15px;
    }
    /*.other_send {*/
        /*float: left;*/
    /*}*/
    p {
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .message-content {
        margin-left: 10px;
        margin-right: 10px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var user_data = new Object();
        user_data.user_id = $('input[name="user_id"]').val();
        user_data.user_nick = $('input[name="user_nick"]').val();
        user_data._xsrf = "{{xsrf_token}}";
        connect_server();

        $('#user_nick').dblclick(function(){
            $(this).removeAttr('readonly');
        });

        $('#user_nick').blur(function(){
            orig_nick = user_data.user_nick;
            user_data.user_nick = $('input[name="user_nick"]').val();
            $(this).attr('readonly','readonly');
            if (orig_nick == user_data.user_nick){
                return
            }
            $.ajax({
                type: 'POST',
                url: '/rename',
                data: user_data,
                dataType: 'json',
                success: function (data) {
                    if (data.stat == 'ok') {
                        rename_user_nick(user_data.user_id,user_data.user_nick)
                    } else {
                        alert(data.msg);
                        user_data.user_nick = orig_nick;
                        $('input[name="user_nick"]').val(orig_nick);
                    }
                },
                error: function (data) {
                }
            })
        });

        function connect_server() {
            $.ajax({
                type: 'GET',
                url: '/connection',
                data: user_data,
                dataType: 'json',
                success: function (data) {
                    if (data.stat == 'ok') {
                        if (data.code == 'msg') {
                            add_message(data.user_id, data.user_nick, data.message);
                        }
                        else if (data.code == 'rename') {
                            rename_user_nick(data.user_id, data.user_nick);
                        }
                        connect_server()
                    } else {
                        alert(data.msg);
//                        window.location.reload()
                    }
                },
                error: function (data) {
                        connect_server()
                }
            })
        }

        $('#send').click(function(){
            send_message()
        });

        function send_message() {
            var message_data = user_data;
            message_data.user_nick = $('input[name="user_nick"]').val();
            message_data.target_user_id = $('input[name="target_user_id"]').val();
            message_data.message = $('textarea[name="message"]').val();
            if (!message_data.message){
                alert('内容不能为空')
                return
            }

            var user_msg = add_message( message_data.user_id,message_data.user_nick, message_data.message);
            $('textarea[name="message"]').val('');
            $.ajax({
                type: 'POST',
                url: '/send',
                data: user_data,
                dataType: 'json',
                success: function (data) {
                    if (data.stat != 'ok') {
                        alert('发送失败');
                    }
                },
                error: function (data) {

                }
            })
        }

        function add_message(user_id,user_nick,message){
            var _html = $('#J-model-message').html();
            _html = _html.replace('{[user_id]}',user_id);
            _html = _html.replace('{[self_send]}',user_id == user_data.user_id?'self_send':'other_send');
            _html = _html.replace('{[user_id]}',user_id);
            _html = _html.replace('{[user_nick]}',user_nick);
            _html = _html.replace('{[message]}',message);

            $('.showActive').append(_html);
            $('.showActive').scrollTop($('.showActive')[0].scrollHeight);
            return true
        }

        function rename_user_nick(user_id,user_nick){
            $('a[data-id="'+user_id+'"]').text(user_nick);
        }
    })

</script>
<script type="text/html" id="J-model-message">
    <div class="message_row" data-id="{[user_id]}">
        <div class="{[self_send]}">
            <p class="user_message">
                <a href="javascript:void(0);" class="users" data-id="{[user_id]}">{[user_nick]}</a>
            </p>
            <i class="message-content" style="margin-right: 30px;">{[message]}</i>
        </div>
    </div>
</script>
